<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header class="header">
      车型故障占比分析
    </el-header>
    <!-- 主内容区域 -->
    <el-main class="main-content">
      <el-row :gutter="20" class="filter-row">
        <el-col :span="6">
          <el-select v-model="selectedModel" placeholder="请选择车型" class="select">
            <el-option
              v-for="item in models"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="selectedTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="date-picker">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-col>
      </el-row>
      <div id="pie-chart" ref="chart" class="chart-container"></div>
    </el-main>
  </el-container>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      selectedModel: '',
      selectedTimeRange: [],
      models: [
        { value: 'modelA', label: '车型 A' },
        { value: 'modelB', label: '车型 B' }
      ],
      chartData: null
    }
  },
  methods: {
    fetchData() {
      // 这里应该调用后端API获取数据
      this.chartData = {
        '制动系统': 41.71,
        '空气循环系统': 11.30,
        '其他关键部件': 20.86,
        '牵引力系统': 18.62,
        '发动机': 7.51
      }
      this.renderChart()
    },
    renderChart() {
      const myChart = echarts.init(this.$refs.chart)
      let option

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '故障占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: Object.entries(this.chartData).map(([name, value]) => ({ name, value }))
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  font-size: 24px;
}

.main-content {
  padding: 20px;
}

.filter-row {
  margin-bottom: 20px;
}

.select,
.date-picker {
  width: 100%;
}

.chart-container {
  width: 100%;
  height: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
  }

  .el-col {
    margin-bottom: 10px;
  }
}
</style>
